import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {BehaviorSubject, Observable,of} from 'rxjs';
import {map} from 'rxjs/operators';
import * as echarts from 'echarts';
import * as $ from "jquery";

let cdata: any;

@Component({
  selector: 'app-test1',
  templateUrl: './test1.component.html',
  styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit {
  _ops: BehaviorSubject<any> = new BehaviorSubject<any>(null);

  options: Observable<any> = this._ops.asObservable();

  constructor(private http: HttpClient) {

  }

  preUrl: string = 'http://127.0.0.1:8080/user';
  user: any = {username: '伶念', age: 6, classname: 'Class One'};
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
  keyword = '';
  son = '';
  jsonArr = [
    {
      "name": "计算机组成原理"
    },
    {
      "name": "计算机网络"
    },
    {
      "name": "数据结构"
    },
    {
      "name": "网页程序设计"
    },
    {
      "name": "嵌入式开发"
    },
    {
      "name": "高等数学"
    },
    {
      "name": "计算机应用技术"
    },
    {
      "name": "计算机科学与技术"
    }, {
      "name": "数学a"
    }
    , {
      "name": "数学4"
    }, {
      "name": "数学7"
    }, {
      "name": "数学3"
    }, {
      "name": "数学a"
    }, {
      "name": "数学i"
    }, {
      "name": "数学a"
    }, {
      "name": "数学a"
    }
  ]
  temp = this.jsonArr

  search($event: string) {


    console.log($event)
    // this.jsonArr.forEach(item => {
    //   console.log(item.name.indexOf($event))
    // })
    this.jsonArr = this.temp.filter(item => item.name.indexOf($event) >= 0)
    // if(this.jsonArr.length!=16){
    //   $("ul").css("display","block")
    // }else{
    //   $("ul").css("display","none")
    // }
    // if(this.keyword==null && this.jsonArr.length==0){
    //   this.jsonArr=this.temp
    // }
  }

  clk($event: string) {
    this.keyword = $event;
    $("ul").css("display", "none")
  }

//   getArrayByName(name,array,length){
//     if(array.length < 1){
//         return;
//     }
//     var result = [];
//     for (var key in array) {
//         if (checkStrContain(array[key].name,name) && result.length<length) {
//             result.push(array[key])
//         }
//     }
//     return result
// }
  // get传值
//////////////////////////////////////////////////////////////////////////////////////////////////////////
  jsonPostBody() {
    this.http
      .post(`${this.preUrl}/postUserInfo`, this.user)
      .subscribe((res) => {
        console.log(res);
      });
  }

  getPath() {
    const {username, age} = this.user;
    this.http.get(`${this.preUrl}/${username}/${age}`).subscribe((res) => {
      console.log(res);
    });
  }

  getQuery() {
    this.http
      .get(`${this.preUrl}/getQuery`, {params: this.user})
      .subscribe((res) => {
        console.log(res);
      });
  }

  getChildren(name: string) {
    let hasFound = false;
    let result = null;
    console.log(name);
    let fn = function (data: any[]) {
      if (Array.isArray(data) && !hasFound) {
        data.forEach(item => {
          if (item.name === name) {
            result = item;
            hasFound = true;
          } else if (item.children) {
            fn(item.children);
          }
        })
      }
    }
    fn(cdata);
    return result;
  }

  getId(name: string) {
    let hasFound = false;
    let result = null;
    console.log(name);
    let fn = function (data: any[]) {
      if (Array.isArray(data) && !hasFound) {
        data.forEach(item => {
          if (item.name === name) {
            result = item.id;
            hasFound = true;
          } else if (item.children) {
            fn(item.children);
          }
        })
      }
    }
    fn(cdata);
    return result;
  }


  change() {
    this.son = this.keyword;
    this._ops.next({
      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove',
      },
      dataZoom: [
        {
          id: 'dataZoomX',
        }
      ],
      series: [
        {
          type: 'tree',
          data: this.getChildren(this.son),
          top: '18%',

          bottom: '14%',
          layout: 'radial',
          symbol: 'emptyCircle',
          symbolSize: 10,
          initialTreeDepth: 3,
          animationDurationUpdate: 750,
          selectedMode: "single",
          textFamily: 'youyuan',
          itemStyle: {
            color: 'rgb(15, 213, 216)',

          },
          label: {
            fontSize: 11,

            color: 'white'
          },
          lineStyle: {
            width: 2.5,
            color: '#1ce5ff7b'
          },
        },
      ],
    })
    console.log(this._ops.getValue(),this.getChildren(this.son));
  }

  ngOnInit(): void {
    $.ajax({
      async: false,
      url: 'assets/data/flarenew.json',
      type: "get",
      dataType: "json",
      success: function (odata) {
        cdata = odata;
      }
    })

    this._ops.next({
      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove',
      },
      dataZoom: [
        {
          id: 'dataZoomX',
        }
      ],
      series: [
        {
          type: 'tree',
          data: cdata,
          top: '18%',

          bottom: '14%',
          layout: 'radial',
          symbol: 'emptyCircle',
          symbolSize: 10,
          initialTreeDepth: 3,
          animationDurationUpdate: 750,
          selectedMode: "single",
          textFamily: 'youyuan',
          itemStyle: {
            color: 'rgb(15, 213, 216)',

          },
          label: {
            fontSize: 11,

            color: 'white'
          },
          lineStyle: {
            width: 2.5,
            color: '#1ce5ff7b'
          },
        },
      ],
    })
    console.log(this._ops.getValue())
    // this.options = this.http
    //   .get<any>('assets/data/classing.json', {responseType: 'json'})
    //   .pipe(
    //     map((data) => (
    //       {
    //         tooltip: {
    //           trigger: 'item',
    //           triggerOn: 'mousemove',
    //         },
    //         dataZoom: [
    //           {
    //             id: 'dataZoomX',
    //           }
    //         ],
    //         series: [
    //           {
    //             type: 'tree',
    //             data: data,
    //             top: '18%',
    //
    //             bottom: '14%',
    //             layout: 'radial',
    //             symbol: 'emptyCircle',
    //             symbolSize: 10,
    //             initialTreeDepth: 3,
    //             animationDurationUpdate: 750,
    //             selectedMode: "single",
    //             textFamily: 'youyuan',
    //             itemStyle: {
    //               color: 'rgb(15, 213, 216)',
    //
    //             },
    //             label: {
    //               fontSize: 11,
    //
    //               color: 'white'
    //             },
    //             lineStyle: {
    //               width: 2.5,
    //               color: '#1ce5ff7b'
    //             },
    //           },
    //         ],
    //       }
    //     )),
    //   );


  }
}
